<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript" src="js/jquery.js"></script>

</head>

<style>
*{ margin:0px; padding:0px;}
.wamp{ width:1000px; margin:0 auto; display:block; background:#fff; height:600px; position:relative;overflow: hidden }
.box_w{ width:1000px;white-space:nowrap; font-size:0px; position:absolute; left:0px; top:0px;}
.box_w dl{ width:250px;white-space:nowrap;font-size:0px;  display:inline-block; cursor:pointer;overflow: hidden }
.box_w dt{ width:250px; height:105px;display:inline-block; }
.box_w dd{ width:744px; height:95px;display:inline-block; margin-top:10px;}
.box_w dd img{ width:100%; height:95px; display:inline-block;}
.box_w a{ display:inline-block;} 
</style>

<body>
<div class="wamp">
	<div class="box_w">
    	<dl>
        	<dt><a><img src="1.jpg"/></a></dt>
            <dd><a><img src="6.jpg"/></a></dd>
        </dl>
        <dl>
        	<dt><a><img src="2.jpg"/></a></dt>
            <dd><a><img src="7.jpg"/></a></dd>
        </dl>
        <dl>
        	<dt><a><img src="3.jpg"/></a></dt>
            <dd><a><img src="9.jpg"/></a></dd>
        </dl>
        <dl>
        	<dt><a><img src="4.jpg"/></a></dt>
            <dd><a><img src="8.jpg"/></a></dd>
        </dl>
    </div>
</div>

<script>
	$(function(){
		$('.box_w dl').mouseover(function(){
			var aa=$(this).index();
			var aac=-aa*250
			$(this).parent('.box_w').stop().animate({left:aac},600)
			$(this).stop().animate({width:"1000px"},600).siblings('dl').stop().animate({width:"250px"},600);
		})
		$('.box_w dl').mouseout(function(){
			$(this).parent('.box_w').stop().animate({left:"0px"},600)
			$(this).stop().animate({width:"250px"},600)
		})
	})
</script>
</body>
</html>
